<template>
  <Form :model="formState" ref="formRef" v-bind="formItemLayout" class="md:flex">
    <div class="md:flex">
      <Col :span="10">
        <FormItem name="namespace" label="资源类型">
          <Select v-model:value="formState.namespace">
            <SelectOption v-for="option in namespaceList" v-bind:key="option.value" :value="option.value"
              >{{ option.description }}
            </SelectOption>
          </Select>
        </FormItem>
      </Col>
      <Col :span="12" class="md:mx-5">
        <FormItem name="name" label="告警名称">
          <Input v-model:value="formState.name"> </Input>
        </FormItem>
      </Col>
      <Col class="md:mx-50" :span="7">
        <FormItem>
          <Button type="primary" @click="onSubmit">查询</Button>
          <Button style="margin-left: 10px" @click="resetForm">重置</Button>
        </FormItem>
      </Col>
    </div>
  </Form>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRaw } from 'vue';
import { Button, Col, Form, FormItem, Input, Select, SelectOption } from 'ant-design-vue';
import { getNamespace } from '/@/api/maintenance-center/alarm/alarm';

const emit = defineEmits(['form']);
const namespaceList = ref([]);
const formRef = ref();
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 24 },
};
const formState = reactive<Record<string, any>>({});

onMounted(async () => {
  namespaceList.value = await getNamespace();
});
const resetForm = () => {
  formRef.value.resetFields();
  formState.namespace = [];
};
const onSubmit = async () => {
  let params;
  formRef.value.validate().then(() => {
    params = toRaw(formState);
    emit('form', params);
  });
};
</script>
